<template>
    <div class="main">
      <section>
        <div class="btn-block" v-if="rightsButtons['add']">
          <router-link :to="{path: 'zhongcao/add',query: {id: '' }}">
            <el-button type="success" size="small" icon="el-icon-circle-plus" plain >新建种草素材</el-button>
          </router-link>
          <!-- <el-button type="danger" size="small" icon="el-icon-delete" plain @click="handleDelBatch">批量删除</el-button> -->
        </div>
        <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="right" label-width="96px">
          <el-row :gutter="50">
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
              <el-form-item label="名称：" >
                <el-input v-model="listQuery.manageTitle" placeholder="请输入种草标题或种草关键字搜索" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
              <el-form-item label="种草类型:">
                <el-select v-model="listQuery.issueSource" clearable @change="search">
                  <el-option  label="用户种草" :value="1"></el-option>
                  <el-option  label="平台种草" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
              <el-form-item label="标签:">
                <el-select v-model="listQuery.tag" clearable @change="search">
                  <el-option v-for="item in tagList" :key="item.value" :label="item.text" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
              <el-form-item label="是否置顶:">
                <el-select v-model="listQuery.isStick" clearable @change="search">
                  <el-option  label="是" :value="1"></el-option>
                  <el-option  label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
              <el-form-item label="创建时间：">
                <el-date-picker
                v-model="rangeTime"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始日期"
                :default-time="['00:00:00','23:59:59']"
                end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="" class="btn-item">
            <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
            <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
          </el-form-item>
        </el-form>
        <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row @selection-change="handleSelectionChange">
          <el-table-column align="center" type="selection"></el-table-column>
          <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
          <el-table-column align="center" label="种草标题" prop="manageTitle"></el-table-column>
          <el-table-column align="center" label="种草素材类型" prop="type">
            <template slot-scope="scope">
              <span v-if="scope.row.type===2">单图文</span>
              <span v-if="scope.row.type===4">多图文</span>
              <span v-if="scope.row.type===8">视频</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="标签" prop="type">
            <template slot-scope="scope">
              <span>{{scope.row.tagDesc}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="种草素材排序" prop="sort"></el-table-column> -->
          <el-table-column align="center" label="是否置顶">
            <template slot-scope="scope">
              <p>{{(scope.row.isStick===0?'否':'是')}}</p>
              <p v-show="scope.row.isStick===1">{{formatDate(scope.row.stickBeginTime, 'YYYY-MM-DD HH:mm:ss')}} ~ {{formatDate(scope.row.stickEndTime, 'YYYY-MM-DD HH:mm:ss')}}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间">
            <template slot-scope="scope">
              <span>{{formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" min-width="70" v-if="rightsButtons['edit'] || rightsButtons['delete']">
            <template slot-scope="scope">
              <el-button v-if="rightsButtons['edit']" type="primary" size="mini"   @click="$router.push({ path: 'zhongcao/edit', query: {id: scope.row.id, issueSource:scope.row.issueSource } })" >编辑</el-button>
              <el-button v-if="rightsButtons['isStick']" type="primary" size="mini" @click="stickOrNot(scope.row.id, scope.row.isStick)" >{{(scope.row.isStick===0?'置顶':'取消置顶')}}</el-button>
              <el-button v-if="rightsButtons['delete']" type="delete" size="mini" @click="deleteZhongcao(scope.row.id)" >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="listQuery.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="listQuery.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="listTotal">
        </el-pagination>
      </section>
      <el-dialog title="请设置置顶有效时间" :visible.sync="dialogStick" @close="handleClose" width="30%">
        <el-form :model="stickForm" :rules="stickRules" ref="stickForm" label-width="100px">
          <el-form-item label="开始时间" prop="stickBeginTime">
            <el-date-picker type="datetime" placeholder="选择开始时间" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" v-model="stickForm.stickBeginTime" popper-class="stick-now"></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="stickEndTime">
            <el-date-picker type="datetime" placeholder="选择结束时间" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" v-model="stickForm.stickEndTime" popper-class="stick-now"></el-date-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogStick = false">取 消</el-button>
          <el-button type="primary" @click="handleStick('stickForm')">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>
<script>
   import moment from 'moment'
    export default {
        name: 'zhongcao',
        data(){
          return {
            // pickerBeginDateBefore: {
            //   disabledDate: (time) => {
            //     let beginDateVal = this.stickForm.stickEndTime;
            //     if (beginDateVal) {
            //       return time.getTime() > new Date(beginDateVal).getTime();
            //     }
            //   }
            // },
            // pickerBeginDateAfter: {
            //   disabledDate: (time) => {
            //     let beginDateVal = this.stickForm.stickBeginTime;
            //     if (beginDateVal) {
            //       return time.getTime() < new Date(beginDateVal).getTime();
            //     }
            //   }
            // },
            isStick: '',
            dialogStick: false,
            stickForm: {
              stickBeginTime: '',
              stickEndTime: ''
            },
            stickRules: {
              stickBeginTime: [
                { required: true, message: '请选择开始时间', trigger: 'blur' }
              ],
              stickEndTime: [
                { required: true, message: '请选择结束时间', trigger: 'blur' }
              ]
            },
            stickId: '',
            listQuery: {
              pageNum: 1,
              pageSize: 10,
              manageTitle:'',
              createdAtEnd:'',
              createdAtStart:'',
              issueSource:'',
              tag: '',
              isStick: ''
            },
            rangeTime:[],
            listLoading: false,
            list: [],
            listTotal: 0,
            btnLoading: false,
            tagList: []
          }
        },
        created () {
          if (this.$store.getters.cachedViews.length === 0) {
            this.getTagList()
            this.getList()
          }
        },
        activated () {
          this.getTagList()
          this.getList()
        },
        methods: {
          // 获取种草标签下拉列表
          getTagList () {
            this.request({
              url: '/zhongcao-web-manage/zhong-cao-manage/article-tags/get',
              method: 'get'
            }).then((res) => {
              this.tagList = res.data
            }).catch(err => {
              console.log(err)
              this.tagList = []
            })
          },
          // 置顶有效时间弹框关闭回调函数
          handleClose () {
            this.stickForm = {
              stickBeginTime: '',
              stickEndTime: ''
            }
            this.$refs['stickForm'].clearValidate()
          },
          // 置顶/取消置顶接口调用
          stickRequest () {
            this.request({
              url:`/zhongcao-web-manage/zhong-cao-manage/stick`,
              method: 'post',
              data: {
                ...this.stickForm,
                articleId: this.stickId,
                status: this.isStick===0?1:0
              }
            }).then(res => {
              if (res.status === 200) {
                this.$message.success('操作成功')
                this.dialogStick = false
                this.getList()
              } else {
                // this.$message.error(res.message)
                this.dialogStick = true
              }
            }).catch(err => {
              console.log(err)
            })
          },
          // 置顶/取消置顶接口调用
          handleStick (formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                this.stickRequest();
              } else {
                this.dialogStick = true
                this.$message.error('置顶有效时间必填')
              }
            })
          },
          // 置顶/取消置顶
          stickOrNot (id, isStick) {
            this.stickId = id
            this.isStick = isStick
            isStick === 1 ? this.stickRequest() : this.dialogStick = true
          },
          // 搜索
          search() {
            this.listQuery.pageNum = 1
            this.getList()
          },
          // 种草列表
          getList(){
            this.listLoading = true
            if(this.rangeTime){
              if(this.rangeTime.length>0){
                this.listQuery.createdAtStart = this.rangeTime[0]
                this.listQuery.createdAtEnd = this.rangeTime[1]
              } else {
                this.listQuery.createdAtStart = ''
                this.listQuery.createdAtEnd = ''
              }
            } else {
              this.listQuery.createdAtStart = ''
              this.listQuery.createdAtEnd = ''
            }
            this.request({
              url: '/zhongcao-web-manage/zhong-cao-manage/list',
              method: 'post',
              data: this.listQuery
            }).then((res) => {
              this.list = res.data
              this.listTotal = res.totalCount
              this.listLoading = false
            }).catch(err => {
              console.log(err)
              this.list = []
              this.listTotal = 0
              this.listLoading = false
            })
          },
          handleSizeChange (value) {
            this.listQuery.pageSize = value
            this.getList()
          },
          handleCurrentChange(val){
            this.listQuery.pageNum = val;
            this.getList();
          },
          // 清空搜索条件
          resetForm (formName) {
            this.rangeTime= []
            this.listQuery.issueSource = ''
            this.listQuery.isStick = ''
            this.listQuery.manageTitle = ''
            this.listQuery.tag = ''
            this.$nextTick(() => {
                this.$refs[formName].resetFields()
            })
            this.getList()
          },
          // 删除种草
          deleteZhongcao(id){
            this.$confirm('删除操作, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.request({
                url:'/zhongcao-web-manage/zhong-cao-manage/delete-article?id='+id,
                method: 'get'
              }).then(res => {
                this.$message.success('删除成功')
                this.getList()
              }).catch(err => {
                console.log(err)
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
          },
          // 选择
          handleSelectionChange(val) {
            this.selectItemList = val
          }
        }
    }
</script>
<style lang="scss">
    @import "../../../styles/mixin";
    .stick-now {
      .el-picker-panel__footer {
        .el-button--text {
          display: none;
        }
      }
    }
    .banner-container{
        .avatar-uploader .el-upload{
            width: 120px;
            height: 120px;
            line-height: 118px;
        }
    }
    .activity-img{
        @include flex;
        @include center;
        min-height: 60px;
        img{
            width:100%;
            height: 100%;
            max-width: 60px;
            max-height: 60px;
        }
    }
    .el-row{
        margin-bottom: 12px;
    }
</style>
